<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="user-scalable=no,width=640">
    <meta name="description" content="vivo xpro6">
    <meta name="keywords" content="vivo xpro6">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <title>vivo X6 急速挑战</title>

    <link rel="stylesheet" href="/styles/base.css"/>
    <link rel="stylesheet" href="/styles/lib.min.css"/>
</head>
<body>
<audio id="j_music" src="/styles/music.mp3" autoplay loop preload="auto"></audio>


<div class="body-music ani-music"></div>

<div class="body-header">
    <div class="mission1"></div>
</div>
<div class="body-footer step"></div>


<div class="body">
    <section class="page page0">
        <div class="page0-loading">
            <p>档案下载中...<span id="j_loading_val">1%</span></p>

            <div class="loading-bar">
                <div class="loading-bar-val"><span class="loading-light ani-scale"></span></div>
            </div>
        </div>

    </section>
    <!--page1-->
    <section class="page page1 ">
        <div class="page1-bg "></div>
        <!--ani-room-bg-->
        <div class="page1-logo" data-ani="ani-logo"></div>
        <div class="page1-title"></div>
        <span class="page1-title-cursor" data-ani="ani-cursor"></span>
        <div class="page1-sight"></div>
        <div class="page1-light-outer">
        <div class="page1-light" data-ani="ani-page1-light"></div>
        </div>
        <div class="page1-glow" data-ani="ani-page1-glow"></div>
        <div class="page1-arrow" data-ani="ani-scale"></div>
        <div class="page1-btn"></div>
    </section>
    <!--page2-->
    <section class="page page2">
        <div class="page2-circle"></div>
        <div class="sector-outer">
            <div class="sector">
                <div class="sector-light"></div>
            </div>
        </div>
        <div class="page2-circle-rotate"></div>
        <div class="page2-circle-scan">
            <!--ani-scan-light-->
            <div class="page2-circle-scan-light"></div>
        </div>
        <div class="page2-circle-light"></div>
        <div class="page2-circle-hd"></div>


        <div class="step">
            <div class="step-move">
                <div class="step-move-text" data-ani=" ani-step-text"></div>
                <div class="step-move-text" data-ani=" ani-step-text"></div>
            </div>
            <div class="step-screen">
                <div class="step-screen-blank " data-ani="ani-screen-blank"></div>
                <div class="step-screen-normal " data-ani="ani-screen-normal"></div>
            </div>
            <div class="step-title">Captain v</div>
            <div class="step-desc j_print">
                <span class="j_print_source hidden">“长按进行急速指纹识别，获得第一个密码” </span>
                <span class="j_print_output"></span><span class="step-desc-cursor" data-ani="ani-cursor"></span>
            </div>
        </div>

    </section>
    <!--page3-->
    <section class="page page3">
        <div class="page3-target">
            <span class="target-plane target-plane1" data-ani="ani-target-plane1"></span>
            <span class="target-plane target-plane2" data-ani="ani-target-plane2"></span>
            <span class="target-plane target-plane3" data-ani="ani-target-plane3"></span>
            <span class="target-plane target-plane4" data-ani="ani-target-plane4"></span>
            <span class="target-missile target-missile1" data-ani="ani-target-missile1"></span>
            <span class="target-missile target-missile2" data-ani="ani-target-missile2"></span>
            <span class="target-missile target-missile3" data-ani="ani-target-missile3"></span>
            <span class="target-missile target-missile4" data-ani="ani-target-missile4"></span>
        </div>
        <div class="page3-shoot-target page3-shoot-target1" data-ani-tem="ani-shoot-target1"></div>
        <div class="page3-shoot-target page3-shoot-target2" data-ani-tem="ani-shoot-target2"></div>
        <div class="page3-mask"></div>
        <div class="page3-sight" data-ani="ani-page3-sight"></div>
        <div class="page3-arrow" data-ani="ani-page3-arrow"></div>
        <div class="page3-shoot-shadow" data-ani-tem="ani-shoot-shadow"></div>
        <div class="page3-shoot"></div>
        <div class="page3-radar">
            <div class="radar-scan" data-ani="ani-radar-scan"></div>
            <div class="radar-target radar-target1" data-ani="ani-radar-target"></div>
            <div class="radar-target radar-target2" data-ani="ani-radar-target"></div>
            <div class="radar-target radar-target3" data-ani="ani-radar-target"></div>
            <div class="radar-target radar-target4" data-ani="ani-radar-target"></div>
        </div>

        <div class="step">
            <div class="step-move">
                <div class="step-move-text " data-ani="ani-step-text"></div>
                <div class="step-move-text " data-ani="ani-step-text"></div>
            </div>
            <div class="step-screen">
                <div class="step-screen-blank " data-ani="ani-screen-blank"></div>
                <div class="step-screen-normal " data-ani="ani-screen-normal"></div>
            </div>
            <div class="step-title">Captain v</div>
            <div class="step-desc">
                <span class="j_print_source hidden">“点击瞄准器进行急速对焦，获取第二个密码” </span>
                <span class="j_print_output"></span>
                <span class="step-desc-cursor" data-ani="ani-cursor">_</span>
            </div>
        </div>

    </section>
    <!--page4-->
    <section class="page page4">
        <div class="page4-light" data-ani="ani-page4-light"></div>
        <div class="page4-circle2 " data-ani="ani-page4-circle"></div>
        <div class="page4-bar">
            <div class="page4-bar-wrapper">
                <div class="page4-bar-wrapper-inner">
                    <div class="page4-bar1 on"></div>
                    <div class="page4-bar2 on"></div>
                    <div class="page4-bar3 on"></div>
                    <div class="page4-bar4 on"></div>
                    <div class="page4-bar5 on"></div>
                    <div class="page4-bar6 on"></div>
                    <div class="page4-bar7 on"></div>
                </div>
            </div>
        </div>
        <div class="page4-circle"></div>
        <div class="page4-circle-move " data-ani="ani-circle-rotate"></div>
        <!--
        <div class="page4-circle" style="transform: rotate(90deg);"></div>
        <div class="page4-circle" style="transform: rotate(180deg);"></div>
        <div class="page4-circle" style="transform: rotate(270deg);"></div>-->
        <div class="page4-toucher"></div>

        <div class="step">
            <div class="step-move">
                <div class="step-move-text "  data-ani="ani-step-text"></div>
                <div class="step-move-text " data-ani="ani-step-text"></div>
            </div>
            <div class="step-screen">
                <div class="step-screen-blank " data-ani="ani-screen-blank"></div>
                <div class="step-screen-normal " data-ani="ani-screen-normal"></div>
            </div>
            <div class="step-title">Captain v</div>
            <div class="step-desc">
                <span class="j_print_source hidden">“手指转圈滑动进行快速充电，获取第三个密码” </span>
                <span class="j_print_output"></span>
                <span class="step-desc-cursor"  data-ani="ani-cursor">_</span>
            </div>
        </div>
    </section>
    <!--page5-->
    <section class="page page5">
        <div class="page5-arrow ani-scale"></div>
        <div class="page5-mission loading"><!--loading-->
            <div class="page5-mission-title ">LOADING...</div>
            <div class="page5-mission-desc">
                <div class="page5-mission-desc-fixed">
                    <span class="j_loading_source hidden"></span>
                    <span class="j_print_output">0101111000111000101111110110101001111011010111100010111101101010011110111011</span>
                    <span class="page5-cursor" data-ani="ani-cursor"></span>
                </div>
            </div>
            <div class="page5-mission-bar">
                <div class="process-bar ">
                    <div class="process-bar-val bar-red" data-ani="ani-bar-red" style="width:1%;">
                        <span class="bar-effect"></span>
                    </div>
                </div>
            </div>
            <div class="page5-mission-action">
                <a href="javascript:;" class="btn btn-off">
                    <span class="btn-inner"><span class="btn-light " data-ani="ani-btn-light"></span>
                        </span>
                </a>
            </div>

        </div>


        <div class="step">
            <div class="step-move">
                <div class="step-move-text "  data-ani="ani-step-text"></div>
                <div class="step-move-text " data-ani="ani-step-text"></div>
            </div>
            <div class="step-screen">
                <div class="step-screen-blank " data-ani="ani-screen-blank"></div>
                <div class="step-screen-normal " data-ani="ani-screen-normal"></div>
            </div>
            <div class="step-title">Captain v</div>
            <div class="step-desc">
                <span class="j_print_source hidden">“开启4G大运存加快解码速度，获取第四个密码” </span>
                <span class="j_print_output"></span>
                <span class="step-desc-cursor"  data-ani="ani-cursor">_</span>
            </div>
        </div>
    </section>
    <!--page6-->
    <section class="page page6">
        <div class="page6-door-left" data-ani-tem="ani-door-left">
            <div class="page6-nums clearfix">
                <div class="nums-item">
                    <span class="nums-item-up " data-ani="ani-nums-item-up"></span>
                    <span class="nums-item-down " data-ani="ani-nums-item-down"></span>
                    <ul>
                        <li>0</li>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>0</li>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                    </ul>
                </div>
                <div class="nums-item">
                    <span class="nums-item-up " data-ani="ani-nums-item-up"></span>
                    <span class="nums-item-down" data-ani="ani-nums-item-down"></span>
                    <ul>
                        <li>0</li>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>0</li>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                    </ul>
                </div>
            </div>
            <div class="page6-status clearfix">
                <div class="status-item"></div>
                <div class="status-item"></div>
            </div>
        </div>
        <div class="page6-door-right " data-ani-tem="ani-door-right">
            <div class="page6-nums clearfix">
                <div class="nums-item">
                    <span class="nums-item-up " data-ani="ani-nums-item-up"></span>
                    <span class="nums-item-down" data-ani="ani-nums-item-down"></span>
                    <ul>
                        <li>0</li>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>0</li>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                    </ul>
                </div>
                <div class="nums-item">
                    <span class="nums-item-up " data-ani="ani-nums-item-up"></span>
                    <span class="nums-item-down" data-ani="ani-nums-item-down"></span>
                    <ul>
                        <li>0</li>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>0</li>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                    </ul>
                </div>
            </div>
            <div class="page6-status clearfix">
                <div class="status-item"></div>
                <div class="status-item"></div>
            </div>
        </div>


        <div class="page6-arrow ani-scale"></div>
        <div class="page6-action"><a href="javascript:;"><span class="btn-inner"><span class="btn-light " data-ani="ani-btn-light"></span>
                        </span></a></div>

        <div class="step">
            <div class="step-move">
                <div class="step-move-text ani-step-text"></div>
                <div class="step-move-text ani-step-text"></div>
            </div>
            <div class="step-screen">
                <div class="step-screen-blank ani-screen-blank"></div>
                <div class="step-screen-normal ani-screen-normal"></div>
            </div>
            <div class="step-title">Captain v</div>
            <div class="step-desc">
                <span class="j_print_source hidden">“拨动数字输入密码至绿灯亮起，方能获得高能利器” </span>
                <span class="j_print_output"></span>
                <span class="step-desc-cursor">_</span>
            </div>
        </div>
    </section>
    <!--page7-->
    <section class="page page7">
        <div class="page7-title"><span class="j_print_source hidden">顺利完成任务</span><span
                class="j_print_output"></span><span class="page7-title-cursor " data-ani="ani-cursor"></span></div>
        <div class="page7-arrow " data-ani="ani-scale"></div>
<div class="page7-phone " data-ani="ani-page7-phone"></div>

        <div class="page7-circle1 page7-circle " data-ani="ani-page7-circle1"></div>
        <span class="page7-circle1-outer page7-circle1 page7-circle " data-ani="ani-page7-circle1-outer"></span>
        <span class="page7-circle1-inner page7-circle1 page7-circle"></span>

        <div class="page7-circle2  page7-circle "></div>
        <span class="page7-circle2-inner page7-circle2 page7-circle " data-ani="ani-page7-circle2"></span>

        <div class="page7-action"><a href="javascript:;">&nbsp;
            <span class="btn-inner">
        <span class="btn-light " data-ani="ani-btn-light"></span></span>
        </a></div>
    </section>


</div>


<div class="popup" style="display: none;"><!---->
    <!--<div class="popup-body-line ani-popup-line"></div>-->
    <div class="popup-body-outer ani-popup-body">
        <div class="popup-body ">
            <div class="popup-body-inner">
                <div class="popup-time">0.4S</div>
                <div class="popup-desc">
                    你仅用0.4秒就完成指纹识别<br/>
                    获得密码：<strong>4</strong> <span class="popup-desc-cursor ani-cursor"></span>

                </div>
                <div class="popup-action">
                    <a href="javascript:;" class="popup-action-next"></a>
                </div>

            </div>

        </div>
    </div>
</div>


<div class="script">
    <script src="scripts/lib/zepto.js"></script>
    <script src="scripts/lib/zepto.preload.js"></script>
    <script src="scripts/lib/zepto.data.js"></script>
    <script src="scripts/lib/zepto.callbacks.js"></script>
    <script src="scripts/lib/zepto.deferred.js"></script>
    <script src="scripts/lib/zepto.fx.js"></script>
    <script src="scripts/lib/zepto.fx_methods.js"></script>
    <script src="scripts/lib/zepto.touch.js"></script>

    <script src="scripts/template.js"></script>
    <script src="scripts/typing.js"></script>
    <script src="scripts/tmpl.js"></script>
    <script src="scripts/images.js"></script>
    <script src="scripts/main.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
    <?php
    require_once("./api/weixin/jssdk.php");
    require_once("./api/config.php");
    $jssdk = new JSSDK(APPID, SECRET);
    $url='http://'.$_SERVER['SERVER_NAME'].$_SERVER["REQUEST_URI"];
    $signPackage = $jssdk->GetSignPackage($url);
    echo "var G_WX_CONFIG=".json_encode($signPackage);
    ?>
    </script>
    <script src="scripts/wx.js"></script>
</div>


</body>
</html>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?a4be8c098cf8cdd7a57c4f162a943b24";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>